<template>
  <a-modal
    :title="form.id ? '编辑' : '创建'"
    :width="640"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-tabs default-active-key="1">
        <a-tab-pane key="1" tab="信息">
            <a-form-model
                ref="ruleForm"
                :model="form"
                :rules="rules"
                :label-col="labelCol"
                :wrapper-col="wrapperCol"
            >
                <a-form-model-item label="名称" ref="name" prop="name">
                    <a-input
                        v-model="form.name"
                        placeholder="请输入租户名称"
                        @blur="
                        () => {
                            $refs.name.onFieldBlur();
                        }
                        "
                    />
                </a-form-model-item>
                <a-form-model-item label="显示名称" ref="displayName" prop="displayName">
                    <a-input
                        v-model="form.displayName"
                        placeholder="请输入显示名称"
                    />
                </a-form-model-item>
                <a-form-model-item label="描述" ref="description" prop="description">
                    <a-input
                        v-model="form.description"
                        placeholder="请输入描述"
                    />
                </a-form-model-item>
                <a-form-model-item label="启用" ref="enabled" prop="enabled">
                    <a-checkbox v-model="form.enabled" name="启用" @change="handleChange">
                    </a-checkbox>
                </a-form-model-item>
                <a-form-model-item label="必要" ref="required" prop="required">
                    <a-checkbox v-model="form.required" name="必要" @change="handleRChange">
                    </a-checkbox>
                </a-form-model-item>
                <a-form-model-item label="强调" ref="emphasize" prop="emphasize">
                    <a-checkbox v-model="form.emphasize" name="强调" @change="handleEChange">
                    </a-checkbox>
                </a-form-model-item>
                <a-form-model-item label="在发现文档中显示" ref="showInDiscoveryDocument" prop="showInDiscoveryDocument">
                    <a-checkbox v-model="form.showInDiscoveryDocument" name="在发现文档中显示" @change="handleSChange">
                    </a-checkbox>
                </a-form-model-item>
            </a-form-model>
        </a-tab-pane>
        <a-tab-pane key="2" tab="声明" force-render>
            <a-transfer
                :data-source="mockData"
                :titles="['不拥有声明', '拥有声明']"
                :target-keys="targetKeys"
                :selected-keys="selectedKeys"
                :render="item => item.title"
                @change="handleChangeAAAA"
                @selectChange="handleSelectChange"
                />
        </a-tab-pane>
        <a-tab-pane key="3" tab="属性" v-if="form.id ? true : false">
           <a-form-model
                :model="propertiesForm"
                :label-col="labelCol"
                :wrapper-col="wrapperCol"
            >
                <a-form-model-item label="key" ref="key" prop="key">
                    <a-input
                        v-model="propertiesForm.key"
                        placeholder="请输入key"
                    />
                </a-form-model-item>
                <a-form-model-item label="值" ref="value" prop="value">
                    <a-input
                        v-model="propertiesForm.value"
                        placeholder="请输入值"
                    />
                </a-form-model-item>
            </a-form-model>
        </a-tab-pane>
     </a-tabs>
    </a-spin>
  </a-modal>
</template>

<script>
import { edit,createIdentity, editHandle } from "@/services/identityServer/identityServer";
export default {
  name: "TenantForm",
  data() {
    return {
      checkNick: true,
      labelCol: { span: 7 },
      wrapperCol: { span: 10 },
      visible: false,
      confirmLoading: false,
      form: {
        // name: '',
        // displayName: '',
        // description: '',
        // enabled: false,
        // required: false,
        // emphasize: false,
        // showInDiscoveryDocument: false,
        // properties: []
        // userClaims:[]
      },
      propertiesForm: {},
      rules: {
        name: [
          { required: true, message: "名称必须填写", trigger: "blur" },
        ],
      },
      mockData: [
          {
            key: "0",
            title: "sub"
          },
          {
            key: "1",
            title: "name"
          },
          {
            key: "2",
            title: "family_name"
          },
          {
            key: "3",
            title: "given_name"
          },
          {
            key: "4",
            title: "middle_name"
          },
          {
            key: "5",
            title: "nickname"
          },
          {
            key: "6",
            title: "preferred_username"
          },
          {
            key: "7",
            title: "profile"
          },
          {
            key: "8",
            title: "picture"
          },
          {
            key: "9",
            title: "website"
          },
          {
            key: "10",
            title: "gender"
          },
          {
            key: "11",
            title: "birthdate"
          },
          {
            key: "12",
            title: "zoneinfo"
          },
          {
            key: "13",
            title: "locale"
          },
          {
            key: "14",
            title: "updated_at"
          },
          {
            key: "15",
            title: "email"
          },
          {
            key: "16",
            title: "email_verified"
          },
          {
            key: "17",
            title: "email_verified"
          },
          {
            key: "18",
            title: "phone_number"
          },
          {
            key: "19",
            title: "phone_number_verified"
          },
          {
            key: "20",
            title: "test"
          },
          {
            key: "21",
            title: "名1"
          },
          {
            key: "22",
            title: "role"
          },
      ],
      targetKeys: [],
      selectedKeys: [],
      propId: ''
    };
  },
  created() {
  },
  methods: {
    handleChangeAAAA(nextTargetKeys) {
      this.targetKeys = nextTargetKeys;
    },
    handleSelectChange(sourceSelectedKeys, targetSelectedKeys) {
      this.selectedKeys = [...sourceSelectedKeys, ...targetSelectedKeys];
    },
    handleChange(e) {
      this.form.enabled  = e.target.checked;
    },
    handleRChange(e) {
      this.form.required  = e.target.checked;
    },
    handleEChange(e) {
      this.form.emphasize  = e.target.checked;
    },
    handleSChange(e) {
      this.form.showInDiscoveryDocument  = e.target.checked;
    },
    openModal(model){
      this.visible = true;
      this.targetKeys = []
      this.propertiesForm = {}
      if(model && model.id){
        this.propId = model.id
        this.getFormData(model.id);
      } else {
        this.propId = '';
        this.form = {
          userClaims: []
        };
      }
    },
    resetForm() {
      this.form = {};
    },
    getFormData(id) {
      this.confirmLoading = true;
      edit(id).then((res) => {
        this.form = {
          ...res,
        };
        let userClaims = res.userClaims
        let checked = []
        userClaims.forEach(e=>{
            checked.push(e.type)
        })
        let filterData = this.mockData.filter(item => { return checked.includes(item.title); });
        filterData.forEach(e=> {
            this.targetKeys.push(e.key)
        })
      }).finally(()=>{
        this.confirmLoading = false
      });
    },
    handleCancel() {
      this.visible = false
      this.currentStep = 0
      this.$refs.ruleForm.clearValidate();
    },
    handleOk() {
      const form = this.$refs.ruleForm;
      this.confirmLoading = true;
      if(this.propId){ 
          form.validate((valid) => {
            if (valid) {
                this.form.userClaims = []
            if(this.targetKeys.length>0) {
                
                let filterData = this.mockData.filter(item => { return this.targetKeys.includes(item.key); });
                
                filterData.forEach(e=> {
                    let info = {}
                    info.type =  e.title
                    this.form.userClaims.push(info)
                })
            }
            let SampleProperty = {
                key : this.propertiesForm.key ? this.propertiesForm.key : '',
                value : this.propertiesForm.value ? this.propertiesForm.value :'',
            }
            let values = this.form
            values.sampleProperty = SampleProperty
            editHandle(this.propId,values)
                .then((res) => {
                this.visible = false;
                form.resetFields();
                this.$message.info("操作成功");
                this.$emit('ok')
                })
                .finally(() => {
                this.confirmLoading = false;
                });
            } else {
            this.confirmLoading = false;
            }
        });
      }else {
        form.validate((valid) => {
        if (valid) {
            this.form.userClaims = []
          if(this.targetKeys.length>0) {
            
            let filterData = this.mockData.filter(item => { return this.targetKeys.includes(item.key); });
            
            filterData.forEach(e=> {
                let info = {}
                info.type =  e.title
                this.form.userClaims.push(info)
            })
          }
          let values = {
                name: this.form.name,
                displayName: this.form.displayName,
                description: this.form.description,
                enabled: this.form.enabled,
                required: this.form.required,
                emphasize: this.form.emphasize,
                extraProperties: {},
                showInDiscoveryDocument: this.form.showInDiscoveryDocument,
                properties: [],
                userClaims:this.form.userClaims
          }
          createIdentity(values)
            .then((res) => {
              this.visible = false;
              form.resetFields();
              this.$message.info("操作成功");
              this.$emit('ok')
            })
            .finally(() => {
              this.confirmLoading = false;
            });
        } else {
          this.confirmLoading = false;
        }
      });
      }
      
    }
  },
};
</script>

<style scoped>
</style>